<template>
    <view class="content">
        <!-- <nut-toast ref="toastRef" /> -->
		<uv-toast ref="toastRef"></uv-toast>
        <map style="width: 100%; height: 300px;" :latitude="mapData.latitude" :longitude="mapData.longitude"
            :show-location="true" :markers="mapData.covers" @markertap="markerLocation">
        </map>
        <uv-search v-model="searchValue" placeholder="请输入地区 如:北京市" @search="search" @custom="search" bgColor="white"
            :showAction="true" actionText="搜索" :animation="true"></uv-search>
        <view class="card" v-for="(m, idx) in mapList" :key="'card' + idx">
            <view class="column" @click="setAddress(m)">
                <view class="flex center">
                    <img :src="m.address_img || img" class="wh-80 border" />
                    <view class="column g-7 col-7">
                        <view class="g-7 align-center">
                            <view class="tag tagMini myTag center ellipsis"
                                :style="{'background-color': app.globalData.primaryColor,'color':'white'}">
                                支持新旧手机
                            </view>
                            <view class="weight fontLong ellipsis">
                                {{ m.company_name }}
                            </view>
                        </view>
                        <view class="size fontLong">
                            {{ m.company_address }}
                        </view>
                    </view>
                </view>
            </view>
            <uv-button text="地图导航" @click="toMap(m)" :color="app.globalData.primaryColor" plain shape="circle" size="small"></uv-button>
        </view>
        <Loading v-if="loading"></Loading>
        <uv-empty v-else-if="mapList?.length == 0"></uv-empty>
    </view>
</template>

<script setup>
const img = '/static/img/shop.jpg';
import { reactive, ref, computed, getCurrentInstance } from "vue";
import { onReachBottom, onPullDownRefresh, onLoad, onReady, onShow } from '@dcloudio/uni-app';
const {
    proxy,
    ctx
} = getCurrentInstance()
const loading = ref(false)
const mapList = ref([])
const app = getApp()
const page = ref(1)
const mapCovers = {
    imsize: {
        width: 30,
        height: 30,
    },
    calloutOption: {
        padding: 4,
        display: 'ALWAYS',
        fontSize: 10
    }
}
const mapData = reactive({
    id: 0, // 使用 marker点击事件 需要填写id
    title: 'map',
    scale: 8,
    latitude: 39.909,
    longitude: 116.39742,
    covers: []
})
const getAuthorize = (callback) => {
    if (app.globalData.mpList.find(p => p == app.globalData.appType)) {
        uni.getSetting({
            success(res) {
                const userLocation = res.authSetting["scope.userLocation"]
                if (userLocation == true) {
                    callback && callback()
                } else if (userLocation == false) {
                    uni.showModal({
                        title: "友情提示",
                        content: "授权地理位置,以获得完整体验!",
                        confirmText: "去授权",
                        cancelText: "取消",
                        success: (res) => {
                            if (res.confirm) {
                                uni.openSetting();
                            }
                        }
                    });
                }
            }
        })
    }
}
const getLocation = () => {
    uni.getLocation({
        type: 'gcj02',
        success: function (res) {
            mapData.latitude = res.latitude
            mapData.longitude = res.longitude
        }
    })
}
onLoad(() => {
    getData(null,()=>getAuthorize(getLocation))
})
onReachBottom(() => {
    app.vibrate()
    getData()
})
onPullDownRefresh(() => {
    app.vibrate()
    setTimeout(function () {
        search(uni.stopPullDownRefresh)
    }, 2000);
})
const searchValue = ref(null)
const search = (callback) => {
    page.value = 1
    getData(searchValue.value, callback)
}
const getData = (value, callback) => {
    loading.value = true
    app.post('auth.store/store', {
        company_address: value,
        page: page.value,
    }).then(res => {
        mapList.value = res.page.current == 1 ? res.list : mapList.value.concat(res.list)
        page.value = res.page.total <= 10 ? 1 : res.page.current + 1
        loading.value = false
        let covers = [
            {
                id: 0,
                latitude: 31.843101,
                longitude: 117.286129,
                name: '合肥1号店',
                address: '安徽省合肥市包河区200号',
                callout: {
                    content: '合肥1号店',
                    ...mapCovers.calloutOption
                },
                ...mapCovers.imsize,
                iconPath: 'https://cdn.laijiuzukeji.com/92/31edbac0fec08881ad536fbd19847f.jpg'
            },]
        res.list.forEach((item, index) => {
            covers.push({
                id: item.id,
                latitude: parseInt(item.latitude),
                longitude: parseInt(item.longitude),
                name: item.company_name,
                address: item.company_address,
                iconPath: item.address_img,
                callout: {
                    content: item.company_name,
                    ...mapCovers.calloutOption
                },
                ...mapCovers.imsize,
            })
        });
        mapData.covers = covers
        callback && callback();
    }).catch(() => {
        loading.value = false
        callback && callback();
    })
}
const markerLocation = (e) => {
    console.log(e.detail);
    app.vibrate()
    const { latitude, longitude, markerId } = e.detail
    const cover = mapData.covers.find(p => p.id == markerId)
    openLocation(latitude, longitude, cover.name, cover.address)
}
const toMap = (e) => {
    app.vibrate()
    const { latitude, longitude, company_name, company_address } = e
    openLocation(latitude, longitude, company_name, company_address)
}
const openLocation = (latitude, longitude, name, address) => {
    if (latitude && longitude) {
        getAuthorize(() => {
            uni.openLocation({
                latitude: parseFloat(latitude),
                longitude: parseFloat(longitude),
                name,
                address,
            })
        })
    } else {
        showToast('地址不存在,请完善地址!')
    }
}
const toastRef = ref(null)
// const showToast = (msg, type = 'text') => {
//     toastRef.value?.showToast[type](msg)
// }
const showToast = (message, type = 'default') => {
    toastRef.value?.show({
        type,
        message
    })
}
const setAddress = (value) => {
    const eventChannel = proxy.getOpenerEventChannel();
    if (eventChannel.listener?.setAddress) {
        app.vibrate()
        eventChannel?.emit('setAddress', value);
        uni.navigateBack();
    } else {
        mapData.latitude = parseInt(value.latitude)
        mapData.longitude = parseInt(value.longitude)
    }
}
</script>


<style lang="scss" scoped>
.content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: env(safe-area-inset-bottom);
}

.wh-80 {
    width: 80px;
    height: 80px;
}

.col-7 {
    width: 70%;
}

::v-deep.amap-container {
    border-radius: 10px;
}

.card {
    background-color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    &:active {
        transform: scale(0.98);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    }

    ::v-deep .nut-cell {
        padding: 0;
    }

    ::v-deep .nut-button {
        width: auto !important;
    }

    .flex {
        width: 100%;
        gap: 10px;
    }

    .align-center {
        display: flex;
        align-items: center;
    }

    .g-7 {
        gap: 7px;
    }

    .left {
        width: 30%;
    }

    .size {
        font-size: small;
        -webkit-line-clamp: 3;
    }


    .weight {
        font-weight: 700;
        font-size: 13px;
    }


    .status {
        color: orange;
        font-weight: blod;
    }

    .fontLong {
        -webkit-box-orient: vertical;
        display: -webkit-box;
        word-break: break-all;
    }

    .yajin {
        width: 120px;
        text-align: center;
        background-color: #f5f5f5;
    }

    .btns {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        flex-flow: wrap;
    }

    .tagMini {
        color: rgb(153, 153, 153);
        background: rgb(233, 233, 233);
    }

    .tagDefault {
        color: var(--nut-tag-default-color, #fff);
    }

    .tag {
        display: inline-flex;
        align-items: center;
        height: var(--nut-tag-height, auto);
        padding: 0 4px;
        font-size: 8px;
        border-radius: var(--nut-tag-default-border-radius, 4px);
        border: var(--nut-tag-border-width, 1px) solid transparent;
    }
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<style lang="scss" scoped>
.cell-group {
    display: inherit;
    overflow: hidden;
    background-color: var(--nut-cell-group-background-color, var(--nut-white, #fff));
    border-radius: var(--nut-cell-border-radius, 6px);
    box-shadow: var(--nut-cell-box-shadow, 0 1px 7px 0 rgb(237, 238, 241));
}

.nut-cell {
    display: flex;
}

.nut-cell:active {
    background-color: #d9d9d9;
}

.cell-title {
    width: 100%;
    font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 14px));
    line-height: var(--nut-cell-line-height, 20px);
    color: var(--nut-cell-color, var(--nut-title-color2, #666));
    display: flex;
    flex-direction: row;
    gap: 10%;
}
</style>